<template>
  <div v-show="visible" class="option-list-container">
    <div
      v-for="(item, i) in selectObj.optionList"
      :key="i"
    >
      <input
        type="radio"
        :id="item.id"
        :value="item.value"
        v-model="filter.price"
        @change="changeSelect"
      >
      <label :for="item.id">{{item.name}}</label>
    </div>
  </div>
</template>

<script>
export default {
  name: "",
  components: {},
  props: ["visible", "selectObj"],
  data() {
    return {
      
    };
  },

  computed: {
    filter() {
      return this.$store.getters.filter
    }
  },

  methods: {
    changeSelect(event) {
      this.filter.price = event.target.value
      this.$store.commit('UPDATE_FILTER', this.filter)
      this.$emit('closeFilter')
    }
  }
};
</script>
<style lang='scss' scoped>
.option-list-container {
  display: flex;
}
.option-container {

}
</style>